

<template>
  <div class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg "
    @click="openDrawer">
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
      <CommonDisplayModule title="输入" :valueList="data?.inoutlist" />
      <CommonDisplayModule title="输出" :valueList="data?.outputjsonlist" />
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <WorkflowDrawerModule ref="drawerRef" :title="node?.node?.label" desc="" :form="data"
    @add="handleClickAddBtn" @remove="handleClickDeleteBtn" @cancel="onCancel" />
</template>
<script setup>
import { ref } from 'vue'
import { Handle, Position, useNode } from '@vue-flow/core'
import { editNode } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue'
import CommonDisplayModule from '../modules/common-display-module.vue'
import WorkflowDrawerModule from '../modules/workflow-drawer-module.vue'

const node = useNode()

const inputList = node.node.data?.publicjson&&JSON.parse(node.node.data?.publicjson)
const outputList = node.node.data?.outputjson&&JSON.parse(node.node.data?.outputjson)
const data = ref({
  issingle: node.node.data?.issingle || 'single',
  isexepignore: node.node.data?.isexepignore ||false,
  defoutput: node.node.data?.defoutput || '',
  inoutlist: node.node.data?.inoutlist || inputList || [],
  batchjsonlist: node.node.data?.batchjsonlist || [
    {
      varname: 'item1',
      varparam: '',
      vartype: 'String'
    }
  ],
  outputjsonlist: node.node.data?.outputjsonlist || outputList || [],
})


const drawerRef = ref(null)
const openDrawer = () => {
  drawerRef.value?.init()
}

function handleClickAddBtn(listKey) {
  data.value[listKey].push({
    varname: '',
    varparam: '',
    vartype: 'String'
  })
  node.node.data = {
    ...node.node.data,
  }
}

function handleClickDeleteBtn(listKey, index) {
  data.value[listKey].splice(index, 1)
  node.node.data = {
    ...node.node.data,
  }
}

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>